<template>
  <div class="image-file-details">
    <div class="image-preview">
      <img :src="fileInfo?.url" :alt="fileInfo?.name">
      <div class="image-dimensions">
        {{ fileInfo?.image_info?.width }} × {{ fileInfo?.image_info?.height }} 像素
      </div>
    </div>

    <el-descriptions :column="1" border>
      <el-descriptions-item label="图片信息">
        <div class="image-details">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <div class="label">尺寸</div>
                <div class="value">{{ fileInfo?.image_info?.width }} × {{ fileInfo?.image_info?.height }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <div class="label">格式</div>
                <div class="value">{{ fileInfo?.image_info?.format?.toUpperCase() }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <div class="label">类型</div>
                <div class="value">{{ fileInfo?.image_info?.animation ? '动图' : '静图' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <BaseFileDetails :file-info="fileInfo" />
  </div>
</template>

<script setup lang="ts">
import BaseFileDetails from './BaseFileDetails.vue'
import type { FileInfo } from '../../types'

defineProps<{
  fileInfo: FileInfo | null
}>()
</script>

<style scoped lang="scss">
.image-preview {
  margin: 20px 0;
  text-align: center;
  
  img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .image-dimensions {
    margin-top: 8px;
    color: #909399;
    font-size: 13px;
  }
}

.image-details {
  .detail-item {
    text-align: center;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;

    .label {
      color: #909399;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .value {
      color: #303133;
      font-size: 14px;
      font-weight: 500;
    }
  }
}

:deep(.el-descriptions__cell) {
  &.el-descriptions__label {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }
}
</style> 